<template>
	<view>
		<view class="auth-pop-box">
			<image class="auth-pop-icon" :src="params.icon" mode="aspectFit"></image>
			<text class="auth-pop-title">{{params.title}}</text>
			<text class="auth-pop-sub-title">{{params.desc}}</text>
			<view class="submit-btn auth-pop-btn" @tap="$emit('submit',params.buttons[0])">{{params.buttons[0]}}</view>
		</view>
		<view class="auth-pop-close-box" @tap="$emit('close')">
			<image class="auth-pop-close-icon" src="/static/pop_close_icon.png" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script setup>
	defineEmits(['close','submit'])
	defineProps({
		params:{
			type:Object,
			default:()=>{
				return {
					icon:'/static/pop_auth_icon.png',
					title:'商户认证',
					desc:'商户未认证，请进行认证！',
					buttons:['立即认证']
				}
			}
		}
	})
</script>

<style lang="scss" scoped>
	.auth-pop-box {
		width: 520rpx;
		padding: 50rpx 50rpx 60rpx;
		background-color: white;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
		overflow: hidden;
		.auth-pop-icon{
			width: 220rpx;
			height: 220rpx;
		}
		.auth-pop-title{
			color: $xh-title-color;
			font-size: 36rpx;
			font-weight: 500;
			margin-top: 30rpx;
		}
		.auth-pop-sub-title{
			color: $xh-subtitle-color;
			font-size: 28rpx;
			margin-top: 30rpx;
		}
		.auth-pop-btn{
			margin-top: 60rpx;
			width: 400rpx;
		}
	}
	.auth-pop-close-box {
		display: flex;
		justify-content: center;
		padding: 30rpx;
		.auth-pop-close-icon {
			width: 45rpx;
			height: 45rpx;
		}
	}
</style>